<template>
  <div class="right">
    <div class="other-container">
      <div class="project" v-show="currentFlow">当前视图：{{ currentFlow }}</div>
      <FlowToolbar />
    </div>
    <div ref="container" class="container"></div>
  </div>
</template>

<script setup lang="ts">
import {onBeforeUnmount, onMounted, ref} from "vue";
import {useClearFlow, useClick, useCurrentFlow, useFlowInit} from "../util/hook.ts";
import LNode from '../node/index';
import {
  BpmnElement,
  BpmnXmlAdapter,
  Snapshot,
  Menu,
  SelectionSelect
} from "@logicflow/extension";
import {flowOpt} from "../config";
import FlowToolbar from "../component/FlowToolbar.vue";

const container = ref();
let flowObj = ref();
const {currentFlow} = useCurrentFlow();

function initFlow() {
  flowObj.value = useFlowInit({
    options: {
      container: container.value,
      ...flowOpt
    },
    othOpt: {
      plugins: [BpmnElement, BpmnXmlAdapter, Snapshot, Menu, SelectionSelect],
      nodes: LNode,
      events: [
        {
          key: 'click',
          func: useClick
        }
      ]
    }
  });
}
onMounted(() => {
  initFlow();
});
onBeforeUnmount(() => {
  useClearFlow(true);
})
</script>

<style scoped>
</style>
